<template>
  <div class="orders">
    <NavBar />
    <h1>历史订单列表</h1>
    <ul class="orders-container">
      <li v-for="order in orders" :key="order.id" class="order-card">
        <div class="order-header">
          <h2>订单号: {{ order.id }}</h2>
          <p>日期: {{ formatDate(order.date) }}</p>
        </div>
        <ul class="order-items">
          <li v-for="item in order.items" :key="item.id" class="order-item">
            <img :src="item.image" class="cake-image" alt="Cake Image" />
            <div class="item-details">
              <h3>{{ item.name }}</h3>
              <p>数量: {{ item.quantity }}</p>
              <p>单价: {{ item.price }}元</p>
            </div>
          </li>
        </ul>
        <div class="order-total">
          <p>总计: {{ order.totalPrice }}元</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import NavBar from './NavBar.vue';

export default {
  name: 'Orders',
  components: {
    NavBar
  },
  data() {
    return {
      orders: [],
      userID: localStorage.getItem('user')
    };
  },
  methods: {
    fetchOrders() {
      const ordersJSON = localStorage.getItem('orders_' + this.userID);
      this.orders = ordersJSON ? JSON.parse(ordersJSON) : [];
      this.orders.sort((a, b) => b.date - a.date);
    },
    formatDate(timestamp) {
      const date = new Date(timestamp);
      return date.toLocaleString();
    }
  },
  created() {
    this.fetchOrders();
    if (!this.userID) {
      this.$router.push('/login');
    }
  },
  watch: {
    userID: {
      immediate: true,
      handler() {
        this.fetchOrders();
      }
    }
  }
};
</script>

<style scoped>
.orders h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.orders-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.order-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.order-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f9f9f9;
}

.order-header h2 {
  margin: 0;
  color: #282930;
}

.order-header p {
  margin: 0;
  color: #666;
}

.order-items {
  list-style: none;
  padding: 0;
}

.order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}

.cake-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.item-details h3 {
  margin: 0;
  color: #282930;
}

.item-details p {
  margin: 5px 0;
  color: #666;
}

.order-total {
  padding: 15px;
  background-color: #f9f9f9;
  text-align: right;
}

.order-total p {
  margin: 0;
  font-weight: bold;
  color: #333;
}

@media (max-width: 768px) {
  .orders-container {
    flex-direction: column;
    justify-content: flex-start;
  }

  .order-card {
    width: 100%;
  }
}
</style>